<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>个人信息</title>
	<link rel="stylesheet" href="js/layui/css/layui.css" />
	<script type="text/javascript" src="js/layui/layui.js" ></script>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <link rel="stylesheet" href="css/information.css"/>
</head>
<body>
<div>
	<form class="layui-form" action="" onsubmit="return false">
        <div id="form_part">
            <input type="hidden" name="id">
            <div class="user-info-hd layui-form-item">
                <span class="layui-form-label items-key">头像</span>
                <div class="items-value">
                    <div class="user-info-item-left own-info">
                        <img id="head_img" alt="" class="userIcon" title="点击查看高清头像" />
                        <img class="own-vip" src="img/vip_no.png"/>
                    </div>
                    <div class="user-info-item-right">
                        <div class="layui-upload">
                            <button type="button" class="changeIcon" id="test1">上传图片</button>
                            <div class="layui-upload-list">
                                <p id="demoText" class="upload-hint">支持JPG、PNG、GIF格式，小于2MB</p>
                            </div>
                            <input type="hidden" name="img">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-block">
                    <input type="text" name="nickname" lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男" />
                    <input type="radio" name="sex" value="女" title="女"/>
                    <input type="radio" name="sex" value="保密" title="保密" checked />
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block" style="line-height: 38px">
                    <span id="email"></span>
                    <a id="change_email"><img src="img/bind.png"/>更改绑定邮箱</a>
                    <input type="hidden" name="email" class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item" id="area-picker">
                <label class="layui-form-label">地区</label>
                <div class="layui-input-block">
                    <div class="layui-input-inline" style="width: 200px;">
                        <select name="province" class="province-selector" lay-filter="province-1">
                            <option value="">请选择省</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 200px;">
                        <select name="city" class="city-selector" lay-filter="city-1">
                            <option value="">请选择市</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">简介</label>
                <div class="layui-input-block">
                    <textarea id="signature" name="signature" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
        </div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
</div>
<div id="hidden_model">
    <!--输入密码-->
    <div id="change_bind" hidden="hidden">
        <form class="layui-form change_bind" style="margin-top: 20px;">
            <input type="hidden" name="id" >
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="token" required lay-verify="required" placeholder="请输入登录密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">新邮箱</label>
                <div class="layui-input-block">
                    <input type="email" name="certificate" lay-verify="required|email" placeholder="请输入更改的绑定邮箱"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
        </form>
    </div>
</div>
	<script>

        let myUrl = localStorage.getItem("myUrl");

		//Demo
		layui.config({
            base: './js/'
            , version: '1.0'
        }).use(['form','upload','layarea'], function() {
			var form = layui.form ,
			upload = layui.upload ,
			$ = layui.$ ,
			layarea = layui.layarea;

			// layarea.render({
            //     elem: '#area-picker',
            //     change: function (res) {
            //         //选择结果
            //         console.log(res);
            //     }
            // });

			var token = sessionStorage.getItem("accessToken");


			var _province;
			var _city;
			/*获得初始信息*/
            $.ajax({
                type: 'post',
                data: {
                    id: token,
                    token: token,
                },
                url: myUrl+'/note-user/user/getUser',
                success: function (data) {
                    console.log("444");
                    $('input[name=id]').each(function () {
                        $(this).val(data.id);
                    })
                    $('#head_img').attr("src",data.img);
                    $('input[name=img]').val(data.img);
                    $('input[name=nickname]').val(data.nickname);
                    $('input[name=sex][value='+data.sex+']').attr('checked','checked');
                    $('#email').text(data.email);
                    $('input[name=email]').val(data.email);
                    $('#signature').text(data.signature);
                    _province= data.province;
                    _city=data.city;
                        console.log(_province);
                    form.render();
                    layarea.render({
                        elem: '#area-picker',
                        data: {
                            province: _province,
                            city: _city,
                        },
                        change: function (res) {
                            //选择结果
                            console.log(res);
                        }
                    });
                }
            })



            //更改绑定邮箱
            $('#change_email').click(function () {
                layer.open({
                    type: 1,
                    title: '更改绑定邮箱',
                    shadeClose: true,
                    shade: false,
                    maxmin: true,
                    area: ['500px', '240px'],
                    content: $('#change_bind'),
                    btn: ['确定修改', '取消修改'],
                    yes: function (index, layero) {
                        if (!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test($("input[name=certificate]").val())) {
                            layer.msg("请输入正确的邮箱");
                            $("input[name=certificate]").val('');
                            return false;
                        }
                        $.ajax({
                            type: 'post',
                            data: $('.change_bind').serialize(),
                            url:  myUrl+'/note-user/certificate/updateEmail',
                            success: function (res) {
                                if (res.rs) {
                                    layer.msg(res.msg, {icon: 6,time:1000},function(){
                                        location.reload();
                                    });
                                } else {
                                    $('.change_bind input[name=token]').val("");
                                    layer.msg(res.msg,{area:['300px','50px']});
                                }
                            }
                        })
                    }
                });
            })
			//监听提交
			form.on('submit(formDemo)', function(data) {
			    console.log(data.field);
                $.ajax({
                    type: 'post',
                    data: data.field,
                    url:  myUrl+'/note-user/user/update?token='+token,
                    success: function (res) {
                        layer.msg(res.msg, {icon: 6,time:1000},function(){
                            location.reload();
                        });
                    }
                })
			});

			//普通图片上传
			var uploadInst = upload.render({
				elem: '#test1'
				,url:  myUrl+'/note-user/user/upload?token='+token
				,before: function(obj){
					//预读本地文件示例，不支持ie8
					obj.preview(function(index, file, result){
						$('#head_img').attr('src', result); //图片链接（base64）
					});
				}
				,done: function(res){
					//如果上传失败
					if(res.code > 0){
						return layer.msg('上传失败');
					}
					//上传成功
                    $('input[name=img]').val("/img/head_img/"+res.msg);
				}
				,error: function(){
					//演示失败状态，并实现重传
					var demoText = $('#demoText');
					demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
					demoText.find('.demo-reload').on('click', function(){
						uploadInst.upload();
					});
				}
			});
		});
	</script>
</body>
</html>